<template>
    <div id="provide">
        <injectSon></injectSon>
        <button @click="changeName">改变父组件name的值</button>
        <div>时间： {{now}}</div>
    </div>
</template>
<script lang="ts">
import { ref, provide, computed } from 'vue'
import injectSon from './components/injectSon.vue'
export default {
    name: 'provide',
    components: {
       injectSon,
    },
    data() {
        return {
            name: '改变前的name',
        }
    },
    provide(){
        return {
            /**
             * 要将VUE实例data里面的值采用provide传递，需要在provide里面返回
             * 当改变祖先组件实例里面的值，要在子组件里面即时响应的话，可以采用computed包裹该VUE实例的值
             * 否则，不会即时响应
             */
            prop3: computed(() => this.name)
        }
    },
    setup(props, context){
        const Val = ref(10)
        provide('prop1', Val)
        provide('prop2', ref(20))
    },
    methods: {
        changeName(){
            this.name = '改变后的name'
        }
    },
    computed: {
        now(){
            const dt = new Date();
            const H = dt.getHours();
            const M = dt.getMinutes();
            const S = dt.getSeconds();
            return `${H}:${M}:${S}`
        },
    }
}
</script>
<style lang="scss">
    #provide{
        p{
            font-size: 20px;
        }
    }
</style>